<template>
    <div class="contextmenu" id="contextmenu" v-show="isShow" :style="{...position, ...positionCompensate}">
      <div
        @mousedown="event => handleClick(item.onClick, event, item.disabled)"
        @mouseup="handleMouseUp"
         data-type="contextmenu"
        v-for="item in list" :key="item.type" class="item" :class="item.disabled() ? 'disabled' : ''">
        {{item.name}}
      </div>

    </div>
</template>

<script >
import { mapState } from 'vuex'
import { getAllAnalysisComponentTypes } from '../../../lib/analysisData'
import getButnList from "../../../ToolBar/buttonList"
import { $ } from "../../../lib/utils"

export default {
  data() {
    return {
      // list: getButnList(["topping", "setAtEnd", "delete", "copy", "paste", "cancel"]),
    }
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    position: {
      type: Object,
      default: ()=> {}
    },
    type: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: "component" | "map",
      default: "component"
    }

  },
  computed: {
    ...mapState("lowCode", {
      selectedComponent: state => state.selectedComponent
    }),
    list(){
      const componentBase = ["topping", "setAtEnd", "delete", "copy", "shear", "paste"]
      const map = ["paste"]
      const baseEnd = ["cancel"]
      let list = []
      // console.log(this.selectedComponent.key)
      if(this.selectedComponent.key){ //  this.type === "component"
        list = [
          ...list,
          ...componentBase
        ]
        const types = getAllAnalysisComponentTypes()
        // 如果是业务组件
        if(types.includes(this.selectedComponent.type)){
          list = [
            ...list,
            "dataDetails"
          ]
        }
      }
      else {
        list = [
          ...list,
          ...map
        ]
      }
      list = [
        ...list,
        ...baseEnd
      ]
      return getButnList([...list])
    },
    /**
     * 位置补偿,如果菜单超出边界,则通过margin补偿position
     */
    positionCompensate(){
      const {
        clientX,
        clientY
      } = this.position
      const height = this.list.length * 40
      const width = 80
      const {
        clientWidth,
        clientHeight
      } = document.body
      const margin = {}
      // left和top方向不可能超出

      // right方向超出
      if(clientWidth - clientX < width){
        margin.marginLeft = `-${width}px`
      }
      // bottom方向超出
      else if(clientHeight - clientY < height){
        margin.marginTop = `-${height}px`
      }
      else {
        margin.marginLeft = 0
        margin.marginTop = 0
      }
      return {
        ...margin
      }
    }
  },
  methods: {
    handleContextmenu(event){
      // if(event.button === 2){

      // }
    },
     handleClick(callback, event, disabled){
      event.preventDefault()
      event.stopPropagation()
      if(disabled()){ return false}
      callback(this)
    },
    handleMouseUp(event){
      event.preventDefault()
      event.stopPropagation()
    },
    

  }

}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>

